<script>
import CakeApi from "../../api/cake";
import CakeReviewForm from "../../components/review/CakeReviewForm.vue";
import CakeReviewList from "../../components/review/CakeReviewList.vue";

export default {
  components: {
    CakeReviewForm,
    CakeReviewList,
  },
  data() {
    return {
      cake: {},
      reviewListKey: 0,
    };
  },
  methods: {
    async getCake(cakeId) {
      try {
        const api = new CakeApi();
        let res = await api.find(cakeId);
        this.cake = res.data;
        //保存在sessionStorage存储cake信息，可以在2个组件中传递数据
        sessionStorage.setItem(
          `cake-${this.cake.id}`,
          JSON.stringify(this.cake)
        );
        console.log(this.cake);
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async delCake(cakeId) {
      try {
        const api = new CakeApi();
        let res = await api.delete(cakeId);
        if (res.code === 204) {
          this.$myMessageBox(res.msg);
          this.$router.replace({ name: "cake-list" });
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    refreshCakeReviewList() {
      this.reviewListKey += 1;
    },
  },
  mounted() {
    let cakeId = this.$route.params.id;
    this.getCake(cakeId);
  },
  computed: {
    cakeInfo() {
      let data = {};
      for (const key in this.cake) {
        if (Object.hasOwnProperty.call(this.cake, key)) {
          if (!this.cake[key]) {
            data[key] = "\u3000";
          } else {
            data[key] = this.cake[key];
          }
          if (key === "intro") {
            data[key] = this.cake[key].replace(/\n/g, "</p><p>");
            data[key] = `<p>${data[key]}</p>`;
          }
        }
      }
      return data;
    },
  },
};
</script>

<template>
  <div class="cake-detail w80">
    <div class="header">
      <h2>{{ cakeInfo.title }}</h2>
      <p>
        <!-- <a class="button" href="javascript:void(0);">编辑</a> -->
        <router-link class="button" :to="'/cake/edit/' + cakeInfo.id"
          >编辑</router-link
        >
        <a
          class="button"
          href="javascript:void(0);"
          @click="delCake(cakeInfo.id)"
          >删除</a
        >
        <a class="button" href="javascript:void(0);" @click="goBack">返回</a>
      </p>
    </div>
    <div class="block">
      <img :src="cakeInfo.pic" :alt="cakeInfo.title" />
      <div class="info">
        
        
        
       
        <dl>
          <dt>商品名:</dt>
          <dd>{{ cakeInfo.originalTitle }}</dd>
        </dl>
        
        
        
        <dl>
          <dt>定价:</dt>
          <dd>{{ cakeInfo.price }}</dd>
        </dl>
       
        <dl>
          <dt>商品ID:</dt>
          <dd>{{ cakeInfo.isbn }}</dd>
        </dl>
      </div>
    </div>
    <div class="intro"><span v-html="cakeInfo.intro"></span></div>
    <div class="review">
      <cake-review-form :cake-id="cake.id" @refresh="refreshCakeReviewList" />
      <cake-review-list :cake-id="cake.id" :key="reviewListKey" />
    </div>
  </div>
</template>

<style scoped>
.block {
  display: flex;
  margin-top: 16px;
}

.block img {
  height: 200px;
  width: 140px;
  margin-right: 16px;
}

.block info {
  flex: auto;
}

.block dl {
  margin: 4px auto;
  display: flex;
  justify-content: flex-start;
}

.block dd {
  margin-left: 10px;
}

.intro {
  margin-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed blue;
}

.review {
  margin: 8px auto;
  width: 90%;
}
</style>
